<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>公寓管理首页</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">公寓管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="/static/img/logo.jpg" class="layui-nav-img">
                    张三
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="index.html">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-nav-side" style="margin-top: 55px;" lay-filter="treenav">
                <li class="layui-nav-item">
                    <a href="javascript:;">公寓管理</a>
                    <dl class="layui-nav-child">
                <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="房屋信息" data-id="1" data-url="/view/house/list.html">房屋信息</a></li>
                <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="合同信息" data-id="2" data-url="/view/contract/list.html">合同信息</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-title="租户信息" data-id="3" data-url="/view/lessee/list.html">
                        租户信息
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-title="房租信息" data-id="4" data-url="/view/rend/list.html">
                        房租信息
                    </a>
                </li>
                </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">服务管理</a>
                    <dl class="layui-nav-child">
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-title="后勤人员" data-id="5"data-url="/view/logistics/list.html">
                        后勤人员
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-title="修缮记录" data-id="6"data-url="/view/record/list.html">
                        修缮记录
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-title="公寓活动" data-id="7"data-url="/view/activity/list.html">
                        公寓活动
                    </a>
                </li>
                </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                <li class="layui-nav-item">
                    <a href="javascript:;" class="site-url" data-title="角色管理" data-id="8"data-url="/view/role/list.html">
                        角色管理
                    </a>
                </li>
                <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="用户信息" data-id="9" data-url="/view/user/list.html">用户信息</a></li>
                </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-tab layui-tab-brief" lay-filter="contentnav" lay-allowClose="true"
         style="margin-left:200px;margin-top:55px;">
        <ul class="layui-tab-title">
            <li class="layui-this">首页</li>
        </ul>
        <ul class="layui-bg-green rightmenu" style="display: none;position: absolute;">
            <li data-type="closethis">关闭当前</li>
            <li data-type="closeall">关闭所有</li>
        </ul>
        <div class="layui-tab-content" style="padding:0;">
            <div class="layui-tab-item layui-show">
                <!-- 	<iframe data-frameid="2" scrolling="auto" frameborder="0" src="http://www.baidu.com" style="width: 100%; height: 710px;"></iframe> -->
            </div>

        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        公寓管理系统 底部固定区域
    </div>
</div>
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function() {
        var element = layui.element;
        var $ = jQuery;

        var active = {
            tabAdd: function(url, id, name) {
                element.tabAdd('contentnav', {
                    title: name,
                    content: '<iframe data-frameid="' + id +
                        '" scrolling="auto" frameborder="0" src="' + url +
                        '" style="width:100%;"></iframe>',
                    id: id
                });
                rightMenu();
                iframeWH();
            },
            tabChange: function(id) {
                element.tabChange('contentnav', id);
            },
            tabDelete: function(id) {
                element.tabDelete('contentnav', id);
            },
            tabDeleteAll: function(ids) {
                $.each(ids, function(index, item) {
                    element.tabDelete('contentnav', item);
                });
            }
        };
        $(".site-url").on('click', function() {
            var nav = $(this);
            var length = $("ul.layui-tab-title li").length;
            if (length <= 0) {
                active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
            } else {
                var isData = false;
                $.each($("ul.layui-tab-title li"), function() {
                    if ($(this).attr("lay-id") == nav.attr("data-id")) {
                        isData = true;
                    }
                });
                if (isData == false) {
                    active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
                }
                active.tabChange(nav.attr("data-id"));
            }
        });

        function rightMenu() {
            //右击弹出
            $(".layui-tab-title li").on('contextmenu', function(e) {
                var menu = $(".rightmenu");
                menu.find("li").attr('data-id', $(this).attr("lay-id"));
                l = e.clientX;
                t = e.clientY;
                menu.css({
                    left: l,
                    top: t
                }).show();
                return false;
            });
            //左键点击隐藏
            $("body,.layui-tab-title li").click(function() {
                $(".rightmenu").hide();
            });
        }
        $(".rightmenu li").click(function() {
            if ($(this).attr("data-type") == "closethis") {
                active.tabDelete($(this).attr("data-id"));
            } else if ($(this).attr("data-type") == "closeall") {
                var tabtitle = $(".layui-tab-title li");
                var ids = new Array();
                tabtitle.each(function(i) {
                    ids.push($(this).attr("lay-id"));
                });
                //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
                active.tabDeleteAll(ids);
            }
            $('.rightmenu').hide(); //最后再隐藏右键菜单
        });

        function iframeWH() {
            var H = $(window).height() - 80;
            $("iframe").css("height", H + "px");
        }
        $(window).resize(function() {
            iframeWH();
        });
    });
</script>
</body>
</html>